<template>
    <a-modal v-model:value="state.popShown" :clickBgToClose="false" :escToClose="false">
        <div class="container c-p-m c-shadow-m c-round-m">
            <div class="c-font-size-xl title" v-html="props.title"></div>
            <div class="c-m-t-xl c-font-size-m" v-html="props.message"></div>
            <div class="c-m-t-xl c-f-h c-f-p-end">
                <a-button color="secondary" size="m" class="c-shadow-m c-m-r-m" @click="
                    emit('confirm', false)
                state.popShown = false;
                ">{{ props.cancelText || $t("AAlert.Cancel") }}</a-button>
                <a-button color="primary" size="m" class="c-shadow-m" @click="
                    emit('confirm', true)
                state.popShown = false;
                ">{{ props.confirmText || $t("AAlert.Confirm") }}</a-button>
            </div>
        </div>
    </a-modal>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.container {
    width: 400px;
    background-color: $defaultBgColor;

    &>.title {
        font-weight: 600;
    }
}
</style>

<script setup lang="ts">
import { reactive } from 'vue'
import AButton from './AButton.vue'
import AModal from './AModal.vue'
import { $t } from '@/lang'

const emit = defineEmits<{
    (e: 'confirm', value: boolean): void
}>()

interface PropsType {
    title?: string
    message?: string
    confirmText?: string
    cancelText?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    title: undefined,
    message: undefined,
    confirmText: undefined,
    cancelText: undefined,
})

interface StateType {
    popShown: boolean
}
const state = reactive<StateType>({
    popShown: true
})
</script>